<template>
  <view class="container">
    <!-- 内容主体区域 -->
    <view class="main-content">
      <view class="badge-dot"></view>
      <view class="badge-dot orange"></view>
      <view class="badge-dot green"></view>
      <view class="badge-dot cyan"></view>
      <view class="badge-dot blue"></view>
      <view class="badge-dot black"></view>
      <view class="badge-dot gray"></view>
      <view class="field-title">
        <text>发布新任务</text>
      </view>
      <form @submit="onSubmit">
        <view class="form-item">
          <label>任务标题</label>
          <input v-model="taskName" type="text" placeholder="请输入标题" :class="{ 'error': taskNameError }" />
          <view v-if="taskNameError" class="error-tip">{{ taskNameError }}</view>
        </view>
        <view class="form-item">
          <label>奖励</label>
          <input v-model="reward" type="text" placeholder="请输入奖励" :class="{ 'error': rewardError }" />
          <view v-if="rewardError" class="error-tip">{{ rewardError }}</view>
        </view>
        <view class="form-item">
          <label>学校</label>
          <picker v-model="selectedSchoolIndex" :range="schoolOptions" @change="handleSchoolChange">
            <view class="picker">
              <text>{{ schoolOptions[selectedSchoolIndex] }}</text>
            </view>
          </picker>
          <view v-if="schoolError" class="error-tip">{{ schoolError }}</view>
        </view>
        <view class="form-item">
          <label>详细描述</label>
          <textarea v-model="taskContext" placeholder="请输入内容" :class="{ 'error': taskContextError }"></textarea>
          <view v-if="taskContextError" class="error-tip">{{ taskContextError }}</view>
        </view>
        <view class="form-item">
          <button type="primary" @click="submitTask">发布</button>
          <!-- <button type="button" :disabled="true" class="disabled-btn">状态被限制，无法发布</button> -->
        </view>
      </form>
    </view>

    <!-- 底部区域 -->
    <view class="footer">
      <text>© - 联系校事达官方客服：6666666</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 头部相关数据
const logoSrc = './static/xsd.png';
const userImgSrc = './static/user01.jpg';
const username = '小灰';

// 侧边栏菜单显示状态
const subMenus = ref({
  home: false,
  task: false,
  profile: false,
  chat: false,
  friends: false
});

// 表单数据
const taskName = ref('');
const reward = ref('');
const school = ref('');
const taskContext = ref('');
const schoolOptions = ['请选择', '中南大学', '湖南大学', '长沙大学'];
const selectedSchoolIndex = ref(0);

// 表单验证错误信息
const taskNameError = ref('');
const rewardError = ref('');
const schoolError = ref('');
const taskContextError = ref('');

// 按钮禁用状态
const isDisabled = computed(() => {
  return taskNameError.value || rewardError.value || schoolError.value || taskContextError.value;
});

// 提交表单
const onSubmit = (e) => {
  e.preventDefault();
  submitTask();
};

// 选择学校
const handleSchoolChange = (e) => {
  selectedSchoolIndex.value = e.detail.value;
  school.value = schoolOptions[selectedSchoolIndex.value];
  console.log('选择的学校:', school.value);
};

// 过滤学校选项（不再需要，可删除相关逻辑，但保留函数声明以保持结构完整）
const filterSchoolOptions = () => {
  // 此函数不再使用
};

// 切换侧边栏子菜单
const toggleSubMenu = (menuKey) => {
  subMenus.value[menuKey] =!subMenus.value[menuKey];
};

// 提交任务
const submitTask = () => {
  let isValid = true;
  if (taskName.value.length < 2) {
    taskNameError.value = '标题太短了啊';
    isValid = false;
  } else {
    taskNameError.value = '';
  }
  if (reward.value.length <= 0) {
    rewardError.value = '请输入奖励内容';
    isValid = false;
  } else {
    rewardError.value = '';
  }
  if (school.value.length <= 0) {
    schoolError.value = '请选择学校';
    isValid = false;
  } else {
    schoolError.value = '';
  }
  if (taskContext.value.length < 1) {
    taskContextError.value = '任务详细描述太短';
    isValid = false;
  } else {
    taskContextError.value = '';
  }
  if (isValid) {
    // 这里可以添加实际提交任务到后端的逻辑，例如使用uni.request
    console.log('任务提交成功', {
      taskName: taskName.value,
      reward: reward.value,
      school: school.value,
      taskContext: taskContext.value
    });
  }
};

// 显示私聊
const showPrivate = (value) => {
  uni.navigateTo({
    url: '/pages/userTalk/userTalk?username=' + value
  });
};
</script>

<style scoped>
/* 全局样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  width: 100px;
}

.logo image {
  width: 100%;
  height: 100%;
}

.nav-left navigator,
.nav-right navigator {
  margin: 0 10px;
  color: #333;
  text-decoration: none;
}

.user-dropdown {
  position: relative;
  cursor: pointer;
}

.user-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.picker {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 120px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.user-dropdown:hover.dropdown-content,
.dropdown-content.active {
  display: block;
}

.dropdown-content navigator {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

/* 侧边栏样式 */
.sidebar {
  width: 200px;
  background-color: #333;
  color: #fff;
}

.sidebar-scroll {
  overflow-y: auto;
  max-height: calc(100vh - 60px);
}

.nav-item {
  padding: 10px 20px;
  cursor: pointer;
}

.sub-menu {
  display: none;
  padding-left: 20px;
}

.nav-item.active.sub-menu {
  display: block;
}

/* 内容主体样式 */
.main-content {
  flex: 1;
  padding: 20px;
}

.title-section {
  margin-bottom: 20px;
}

.badge-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.badge-dot.orange {
  background-color: orange;
}

.badge-dot.green {
  background-color: green;
}

.badge-dot.cyan {
  background-color: cyan;
}

.badge-dot.blue {
  background-color: blue;
}

.badge-dot.black {
  background-color: black;
}

.badge-dot.gray {
  background-color: gray;
}

.field-title {
  margin-top: 10px;
  margin-bottom: 20px;
  font-weight: bold;
}

.form-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}

.form-item label {
  width: 100px;
  margin-right: 10px;
}

.form-item input,
.form-item textarea {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.form-item input.error,
.form-item textarea.error {
  border-color: red;
}

.error-tip {
  color: red;
  font-size: 12px;
}

.school-input {
  /* 不再使用自定义下拉，相关样式可删除，但保留以保持结构完整 */
  position: relative;
}

.dropdown {
  /* 不再使用自定义下拉，相关样式可删除，但保留以保持结构完整 */
  position: absolute;
  top: 30px;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.dropdown-item {
  /* 不再使用自定义下拉，相关样式可删除，但保留以保持结构完整 */
  padding: 5px 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  /* 不再使用自定义下拉，相关样式可删除，但保留以保持结构完整 */
  background-color: #f2f2f2;
}

.disabled-btn {
  background-color: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}

/* 底部样式 */
.footer {
  text-align: center;
  padding: 20px;
  background-color: #f8f8f8;
}
</style>